<template>
  <div class="home">
    <el-container>
    <!--    第一个导航栏-->

    <!--        搜索框与第二个导航栏-->
    <el-header style="height: 140px;padding: 0px;background-color:white;">
      <el-row style="width: 1200px;margin: 0 auto;  background-color:white">
        <!-- logo-->
        <el-col :span="7" style="">
          <div class="grid-content bg-purple" style="height: 100px">
            <a href="/"><img style="float: left;margin-top: 10px;width: 250px;height: 80px"
                    src="/img.png"></a>
          </div>
        </el-col>
        <!--                搜索框-->
        <el-col :span="11" style="margin: 0px">
          <div class="grid-content bg-purple-light" style="height: 100px">
            <el-dropdown style="float: right; background-color: #969696; color: white; line-height: 40px; margin-top:10px;">
                                <span class="el-dropdown-link" style="color: #646464"><a class="a2" style="font-size: 15px" href="" >{{type1}}</a>
                                 <i class="el-icon-arrow-down el-icon--right"></i>
                                             </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="type in category"><a class="a1" href="javascript:void (0)" @click="type2(type.id,type.name)">{{type.name}}</a> </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>

            <input style="width: 400px;border: 2px solid red; margin-right:0px;height: 36px" placeholder="请输入搜索内容" type="text" v-model="text">
            <a :href="'/search?text='+this.text+'&typeid='+this.id">
              <el-button style="border: 2px solid red; background-color: red;margin-left: -10px" type="primary" icon="el-icon-search">
              </el-button>
            </a>
            <div style="width: 200px;height:10px;line-height: 0px ;">
                       <span  class="a2" style="line-height: 20px;padding: 0px;width: 300px ;margin-right: 0px">
                            热搜:<a class="a2" :href="'/search?hotid='+hot.id" v-for="hot in hotArr" >{{hot.name}}   </a>
                        </span>
            </div>
            <div style="width: 200px;line-height: 0px ;float: right">
                        <span class="a2" style="line-height: 0px;padding: 0px;width: 300px ;margin-right: 30px">
                            <a href="/highSearch" class="a2">高级搜索</a></span>
            </div>
          </div>
        </el-col>
        <!-- 购物车订单-->
        <el-col :span="6">
          <div class="grid-content bg-purple" style="height: 100px">
<!--            <a href="/shoppingCar">-->
              <el-button id="button1" type="primary" @click="FAndT(0)" :icon="icon" >购物车 {{shoppingCarNum}}</el-button>
<!--            </a>-->
            <a href="/Order" style="margin-left: -5px"><el-button type="info" icon="">我的订单</el-button></a>
          </div>
        </el-col>
      </el-row>
      <hr style="height: 3px;background-color: red;line-height: 0px;margin-bottom: 0px">
      <!--导航栏开始-->
      <div style="width: 1200px;margin: 0 auto;padding: 0px;background-color: rgba(100,100,100,0.38);line-height: 30px">
        <a class="a2" href="/ranking" style="margin-left: 10px">图书排行榜</a>
        <el-divider direction="vertical"></el-divider>
        <span v-for="type in category">
            <a class="a2" :href="'/search?typeid='+type.id" style="margin-left: 10px">{{type.name}}</a>
            <el-divider direction="vertical"></el-divider>
                    </span>
      </div>
    </el-header>
    <div style="width: 1200px;margin: 10px auto;">
      <img src="http://img62.ddimg.cn/upload_img/00822/cxtc/1200x65_1011-1665641240.jpg">
    </div>

      <el-main style="width: 1500px;margin: 0 auto;" >
    <router-view/>
      </el-main>
   <el-footer style="height: auto; background-color: #FAFAFA">
     <hr style="height: 3px;background-color: red;line-height: 0px;margin-bottom: 0px">
<!--      <img style="margin-top: 10px;margin-bottom: -10px" src="footer.jpg">-->
<!--   <hr style="height: 1px;background-color:black;line-height: 0px;margin-bottom: 0px">-->
  </el-footer>
      <div style="background-color: #fafafa;height: 79px;">
        <div style=" text-align: center">
          <a href="" style="margin-right: 50px"><img src="imgs/LRJWH4Y~QC0B)69$VLZ6E5K.png" alt=""></a>
          <a href="" style="margin-right: 50px"><img src="imgs/28O3C(58%251%25DTSCH%25%7B%256TXD.png" alt=""></a>
          <a href=""><img src="imgs/07Y%7D2S@R1EP%5BGC2WSSTZ%5DZL.png" alt=""></a>
        </div>
      </div>
      <div style="padding:0 0">
        <el-card class="box-card2" style="height: 170px ; padding-top: 0;margin-top: 0;text-align: center; ">
          <div style="text-align: center;width: 650px;height: 170px;margin: 0 auto;padding-top: 0;">
            <table style="font-size: 12px;text-align: center;">
              <tr>
                <th>购物指南</th>
                <th>支付方式</th>
                <th>订单服务</th>
                <th>配送方式</th>
                <th>退换货</th>
                <th>商家服务</th>
              </tr>
              <tr>
                <td><a href="">购物流程</a></td>
                <td><a href="">网上支付</a></td>
                <td><a href="">配送服务查询</a></td>
                <td><a href="">当日递</a></td>
                <td><a href="">退换货服务查询</a></td>
                <td><a href="">商家中心</a></td>
              </tr>
              <tr>
                <td><a href="">发票制度</a></td>
                <td><a href="">礼品卡支付</a></td>
                <td><a href="">订单状态说明</a></td>
                <td><a href="">次日达</a></td>
                <td><a href="">自助申请退换货</a></td>
                <td><a href="">运营服务</a></td>
              </tr>
              <tr>
                <td><a href="">服务协议</a></td>
                <td><a href="">银行转帐</a></td>
                <td><a href="">自助取消订单</a></td>
                <td><a href="">订单自提</a></td>
                <td><a href="">退换货进度查询</a></td>
              </tr>
              <tr>
                <td><a href="">会员优惠</a></td>
                <td><a href="">礼券支付</a></td>
                <td><a href="">自助修改订单</a></td>
                <td><a href="">验货与签收</a></td>
                <td><a href="">退款方式和时间</a></td>
              </tr>
            </table>
          </div>
        </el-card>
      </div>
      <div style="height: 1px ; width: 100%;"></div>
      <div style="text-align: center">
        <img src="imgs/OD3E2GCQ%60)%60PYEKJ60)8$TC.png" alt="" >
      </div>
<!--    <el-footer v-if="advertisement" style=" bottom: 0px; width: 100%;  height:140px;bottom: 0px; background-color: rgba(14,0,0,0.49);position: fixed;z-index: 9999" >-->
<!--      <div>-->
<!--        <img src="http://img60.ddimg.cn/ddimg/2353/yinliubanner-1640156285.gif">-->
<!--        <el-button style="position: absolute; color: white;border: 0px; background-color: rgba(249,249,249,0)" icon="el-icon-circle-close" @click="advertisementUP()"></el-button>-->
<!--      </div>-->
<!--    </el-footer>-->

      <template>
        <el-backtop :bottom="300" :right="195" >
          <div
              style="{
        height: 300px;
        width: 400px!important;
        background-color: #f2f5f6;
        box-shadow: 0 0 6px rgba(0,0,0, .12);
        text-align: center;
        line-height: 30px;
        color: #1989fa;
      }">
            <el-button icon="el-icon-top" style="height: 50px ;width: 100px;margin: 0px;padding: 0px">回到顶部</el-button>
          </div>
        </el-backtop>
      </template>
    </el-container>

  </div>
</template>

<script>
export default {
  data() {
    return {
      icon:"el-icon-shopping-cart-1",
      id:0,
      user:null,
      shoppingCarNum:0,
      addressArr: [{name: "北京"}, {name: "天津"}, {name: "河北"}, {name: "北京"}, {name: "天津"}, {name: "河北"}, {name: "北京"}, {name: "天津"}, {name: "河北"}, {name: "北京"}, {name: "天津"}, {name: "河北"}, {name: "北京"}, {name: "天津"}, {name: "河北"}],
      address: "北京",
      advertisement: true,//广告显示和关闭
      text: "",//搜索框
      category:[{name: "科技"}, {name: "IT"},{name: "科技"},{name: "HH"},{name: "科技"}, {name: "IT"}, {name: "HH"}, {name: "HH"}, {name: "HH"}, {name: "HH"}, {name: "HH"}, {name: "HH"}, {name: "HH"}, {name: "HH"},{name: "科技"}, {name: "IT"}, {name: "HH"},{name: "科技"}, {name: "IT"}, {name: "HH"}, {name: "北京"}, {name: "天津"},  {name: "河北"}],
      // bigtype:[],
      type1:"全部分类",
      hotArr:[{name:"小计"},{name:"小雅"}],
      activeIndex: '2',
      activeIndex2: '3',
      arr:[{name: "北京"}, {name: "天津"}, {name: "河北"}, {name: "北京"}, {name: "天津"}, {name: "河北"}, {name: "北京"}],
      brr:[{name: "北京"}, {name: "天津"}, {name: "河北"}, {name: "北京"}, {name: "天津"}, {name: "河北"}, {name: "北京"}, {name: "天津"}, {name: "河北"}, {name: "北京"}, {name: "天津"}, {name: "河北"}, {name: "北京"}, {name: "天津"}, {name: "河北"}],
      crr:[{name: "北京"}, {name: "天津"}, {name: "河北"}, {name: "北京"}, {name: "天津"}, {name: "河北"}, {name: "北京"}, {name: "天津"}, {name: "河北"}, {name: "北京"}, {name: "天津"}, {name: "河北"}, {name: "北京"}, {name: "天津"}, {name: "河北"}],
      imgUrlArr:[{url:"http://img61.ddimg.cn/upload_img/00822/cxtc/750x315_1011-1665641221.jpg"},{url:"logo.jpg"},{url:"logo3.jpg"},{url:"logo.jpg"},],
      contentArr:[{content:"满100减50"},{content:"满100减50"},{content:"满100减50"},],
      productArr:[{id:1,title:"12123",price:111,viewCount:123,saleCount:4534,url:"logo.jpg"},{id:1,title:"12123",price:111,viewCount:123,saleCount:4534,url:"logo.jpg"},{id:1,title:"12123",price:111,viewCount:123,saleCount:4534,url:"logo.jpg"},{id:1,title:"12123",price:111,viewCount:123,saleCount:4534,url:"logo.jpg"},{id:1,title:"12123",price:111,viewCount:123,saleCount:4534,url:"logo.jpg"},{id:1,title:"12123",price:111,viewCount:123,saleCount:4534,url:"logo.jpg"},{id:1,title:"12123",price:111,viewCount:123,saleCount:4534,url:"logo.jpg"},{id:1,title:"12123",price:111,viewCount:123,saleCount:4534,url:"logo.jpg"},],
      topArr:[{title:"asd"},{title:"asd"},{title:"asd"},{title:"asd"},{title:"asd"},{title:"asd"},{title:"asd"},{title:"asd"},]
    };
  },
  methods: {
    addressUpdata(name) {
      this.address = name;
    },
    advertisementUP() {
      this.advertisement = false;
    },
    type2(id,name){
      this.type1=name;
      this.id=id;
    },
    handleSelect(key, keyPath) {
      alert(key, keyPath);
      location.href="http://www.baidu.com"
    },
    selectCategory(){
      let url = 'http://localhost:8080/indexs/selectCategory';
      console.log('url = ' + url);
      this.axios.get(url).then((response) => {
        console.log('response = ' + response);
        let responseBody = response.data;
        this.category = responseBody.data;
      });
    },
    selectHotSearch(){
      let url = 'http://localhost:8080/indexs/selectHotSearch';
      console.log('url = ' + url);
      this.axios.get(url).then((response) => {
        console.log('response = ' + response);
        let responseBody = response.data;
        this.hotArr = responseBody.data;
      });
    },
    countSoppingCar(){
      if(this.user!=null) {
        let url = 'http://localhost:8080/indexs/' + this.user.id + '/countSoppingCar';
        console.log('url = ' + url);
        this.axios.get(url).then((response) => {
          console.log('response = ' + response);
          let responseBody = response.data;
          this.shoppingCarNum = responseBody.data;
          if(this.shoppingCarNum!=0){
            this.icon="el-icon-shopping-cart-full";
          }
        });
      }
    },
    getUserLogin() {
      let url = "http://localhost:8080/indexs/getUserLogin"
      this.axios.get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.data != null) {
          this.user = responseBody.data;
          this.countSoppingCar();
          this.shoppingCarNum = 0;
        }
      });
    },
    FAndT(id){
      if(this.user==null){
        location.href='/userlogin'
      }else {
        if(id==1) {
          location.href = ''
        }else if(id==0){
          location.href = '/shoppingCar'
        }
      }
    }
  },
  mounted() {
 this.selectCategory();
 this.selectHotSearch();
 this.countSoppingCar();
 this.getUserLogin();
        // ?text=11&typeid=0
 let text=location.search;
    console.log("12312312312312112123",text);
    let text1=text.split("&")[0].split("=")[1];
    console.log("1231231231111----2312112123",text.split("&")[0].split("=")[0]);
    if(text.split("&")[0].split("=")[0]=="?text") {
      if (text != null && text != "") {
        this.text = decodeURI(text1);
      }
    }
  },
  created() {

  }
}
</script>
<style>
body {
  margin: 0 auto;
}
body {
  margin: 0 auto;
  color: #646464;
  font-size: 16px;
  position: relative;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-icon-arrow-down {
  font-size: 12px;
}

a {
  text-decoration: none;
  color: #646464;
  font-size: 16px
}
.el-divider--vertical {
  display: inline-block;
  width: 1px;
  height: 100%;
  margin-top: -20px;
  vertical-align: middle;
  position: relative;
}

.el-divider--horizontal {
  margin-left: 10px;
}
.box-card{
  float: left;
}
td>a{
  font-size: 12px;
  margin-top: 20px;
  margin-right: 20px;
  margin-left: 17px;
}
th{
  margin-right: 20px;
}
.el-row::after{
  clear: both;
}

.el-header, .el-footer {
  background-color: #f9f9f9;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

/*.el-aside {*/
/*  !*background-color: #D3DCE6;*!*/
/*  !*color: #333;*!*/
/*  text-align: center;*/
/*  line-height: 200px;*/
/*}*/

/*.el-main {*/
/*  !*background-color: #E9EEF3;*!*/
/*  color: #333;*/
/*  text-align: center;*/
/*  line-height: 160px;*/
/*  padding: 10px;*/
/*}*/

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}


.el-dropdown-menu__item {
  font-size: 10px;
}

.a1 {
  text-decoration: none;
  font: 12px 'Hiragino Sans GB', "simsun", "Arial";
  color: #646464;
  line-height: 0px;
}

.a1:hover {
  color: red;
}
.a2 {
  text-decoration: none;
  font: 12px 'Hiragino Sans GB', "simsun", "Arial";
  color: #646464;
  line-height: 0px;
}

.a2:hover {
  color: red;
  text-decoration: underline;
}

/*搜索，购物车订单按钮的共用*/
.el-button{
  border-radius: 0px;
}
#button1:hover{
  background-color: white;
  color: red;
}
/*左侧导航*/
.el-menu-demo{
  width: 190px;
  text-align: left;
  background-color: white;

}
/*.el-row {*/
/*    margin-bottom: 20px;*/

/*&*/
/*:last-child {*/
/*    margin-bottom: 0;*/
/*}*/

/*}*/
/*.el-col {*/
/*    border-radius: 4px;*/
/*}*/

/*.bg-purple-dark {*/
/*    background: #99a9bf;*/
/*}*/

/*.bg-purple {*/
/*    background: #d3dce6;*/
/*}*/

/*.bg-purple-light {*/
/*    background: #e5e9f2;*/
/*}*/

/*.grid-content {*/
/*    border-radius: 4px;*/
/*    min-height: 36px;*/
/*}*/

/*.row-bg {*/
/*    padding: 10px 0;*/
/*    background-color: #f9fafc;*/
/*}*/
/*轮播图*/
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
/*  公告  */
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.box-card {
  width: 230px;
  height: 110px;
  border: 1px solid rgba(0, 0, 0, 0.58);
}
/*    展示*/
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>